<template>
	<view class="content">
		<!-- 导航 -->
		<view class="formBox status-wrapper boxShadow f-c-sa">
			<view :class="currentStatus ==  item.value? 'active' : ''" @click="selectStatus(item.value)"
				v-for="(item, index) in statusList" v-key="index">{{ item.name }}</view>
		</view>
		<!-- 优惠券 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="coupons" v-for="(item, index) in list" :key="index">
				<view class="coupons-con f-c-fs"
					:class="statusListIndex == 1 ? 'coupons-con-used' : statusListIndex == 2 ? 'coupons-con-unuse' : ''">
					<view class="type">{{ item.couponName }}</view>
					<view class="coupons-l">
						<view class="money f-c-c">
							<text class="money-i">¥</text>
							{{ item.money }}
						</view>
						<view class="money-conditions">{{ item.conditionMoney }}</view>
					</view>
					<view class="coupons-r">
						<view class="tit">{{ item.couponName }}</view>
						<view class="time">{{ item.useTime }}</view>
						<view class="f-c-sb" @click.stop="showSing(index)">
							<view class="area">{{ item.storeNum }}</view>
							<view class="btn" v-if="!item.isShow">
								<u-icon name="arrow-down" color="#999999" size="18"></u-icon>
							</view>
							<view class="btn" v-if="item.isShow">
								<u-icon name="arrow-up" color="#999999" size="18"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<!-- 使用说明 -->
				<view class="coupons-sign" v-if="item.isShow">
					<view class="item-t">
						使用说明：部分门店可用
						<text @click.stop="getstoreList(item.couponId)">查看使用门店></text>
					</view>
					<!--				<view class="item">2.{{ item.useNotice }}</view>-->
					<view v-if="item.userAreaType==2" class="item" @click.stop="getshopList(item.couponId)">

						<text>查看指定项目/商品></text>
					</view>
				</view>
			</view>
		</mescroll-body>

		<u-popup mode="bottom" v-model="storeShow" :closeable="true" border-radius="26">
			<scroll-view scroll-y="true" @scrolltolower="storeMore"
				style="height: 900rpx;padding: 40rpx 0;box-sizing: border-box;" class="">
				<view class="list">
					<u-empty v-if="!storeList.length" mode="list" style="margin-top: 200rpx;"></u-empty>
					<view class="item boxShadow" v-for="(item, index) in storeList" :key="item.storeId">
						<!-- <view class="f-c-fs">
							<view class="color color1" :class="'color' + item.storeType">{{ item.storeTypeStr }}</view>
						</view> -->
						<view class="item-title f-c-sb">
							<view>{{ item.storeName }}</view>
							<!-- <u-checkbox @change="checkboxChange1(index, item.checkbox, item.storeId)" v-model="item.checkbox"></u-checkbox> -->
						</view>
						<view class="info">{{ item.address }}</view>
					</view>
					<u-loadmore v-if="!storeListQuery.noData && storeList.length != 0" :status="'nomore'"
						:load-text="{ nomore: '没有更多数据了' }" />
				</view>
			</scroll-view>
		</u-popup>
		<u-popup mode="bottom" v-model="shopShow" :closeable="true" border-radius="26">
			<scroll-view scroll-y="true" @scrolltolower="shopMore"
				style="height: 900rpx;padding: 40rpx 0;box-sizing: border-box;" class="">
				<view class="list">
					<u-empty v-if="!shopList.length" mode="list" style="margin-top: 200rpx;"></u-empty>
					<view class="item boxShadow" v-for="(item, index) in shopList" :key="item.gsId">
						<view v-if="item.type==1" class="item-title f-c-sb">
							<view>商品名称: {{ item.goodsServerName }}</view>
							<!-- <u-checkbox @change="checkboxChange1(index, item.checkbox, item.storeId)" v-model="item.checkbox"></u-checkbox> -->
						</view>
						<view v-if="item.type==1" class="info">
							库存:{{ item.surplusNumber }} 使用方式: {{ item.useWayStr }}
							<view>商品售价：{{ item.costPrice }}/元</view>
						</view>
						<view v-if="item.type==2" class="item-title f-c-sb">
							<view>项目名称: {{ item.name }}</view>
							<!-- <u-checkbox @change="checkboxChange1(index, item.checkbox, item.storeId)" v-model="item.checkbox"></u-checkbox> -->
						</view>
						<view v-if="item.type==2" class="info">
							<view>商品售价：{{ item.price }}/元</view>
						</view>
					</view>
					<u-loadmore v-if="!shopListQuery.noData && shopList.length != 0" :status="'nomore'"
						:load-text="{ nomore: '没有更多数据了' }" />
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import {
		apiMyCouponList
	} from '@/api/marketingB-helper.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				storeShow: false,
				shopShow: false,
				customerNo: '',
				singStatus: false,
				currentStatus: 1,
				statusList: [{
						name: '待使用',
						value: '1'
					},
					{
						name: '已使用',
						value: '2'
					},
					{
						name: '已过期',
						value: '3'
					}
				],
				storeList: [],
				list: []
			};
		},
		onLoad(option) {
			this.customerNo = JSON.parse(option.param).customerNo;
		},
		methods: {
			storeMore() {
				if (this.storeListQuery.noData) {
					this.getstoreList();
				}
			},
			shopMore() {
				if (this.shopListQuery.noData) {
					this.getshopList();
				}
			},
			selectStatus(status) {
				this.currentStatus = status;
				this.mescroll.triggerDownScroll();
			},
			showSing(index) {
				console.log(index);
				this.$set(this.list[index], 'isShow', !this.list[index].isShow);
				this.$forceUpdate();
			},
			getstoreList(couponId) {
				if (couponId) {
					this.storeListQuery.pageNo = 1
					this.storeListQuery.noData = true
					this.storeListQuery.couponId = couponId;
				}
				var data = {
					...this.storeListQuery,
					lon: this.$get('location')[0],
					lat: this.$get('location')[1]
				};

				customerApplyStoreList(data).then(res => {
					this.storeShow = true;
					if (this.storeListQuery.pageNo == 1) {
						this.storeList = res.data;
					} else {
						this.storeList = this.storeList.concat(res.data);
					}

					this.storeListQuery.pageNo += 1;
					if (this.storeListQuery.pageSize != res.data.length || !res.data) {
						this.storeListQuery.noData = false;
					}
				});
			},
			getshopList(couponId) {
				if (couponId) {
					this.shopListQuery.couponId = couponId;
				}

				var data = {
					...this.shopListQuery
				};
				customerApplyGoodsList(data).then(res => {
					this.shopShow = true;
					if (this.shopListQuery.pageNo == 1 && res.data) {
						this.shopList = res.data;
					} else if (res.data) {
						this.shopList = this.shopList.concat(res.data);
					}

					this.shopListQuery.pageNo += 1;
					if (res.data && this.shopListQuery.pageSize != res.data.length) {
						this.shopListQuery.noData = false;
					}
				});
			},
			upCallback(page) {
				apiMyCouponList({
					couponBusiness: this.currentStatus,
					memberNo: this.customerNo,
					pageNo: page.num,
					pageSize: page.size
				}).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.data); //追加新数据
					this.mescroll.endSuccess(res.data.length);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			}
		}
	};
</script>

<style lang="less">
	.content {
		padding: 20rpx 0;
		background: #f5f5f5;

		.coupons {
			width: 657rpx;
			text-align: center;
			margin: auto;
			margin-bottom: 20rpx;

			.coupons-sign {
				padding: 40rpx 60rpx;
				background: #fff;
				box-shadow: 0rpx 30rpx 30rpx 0rpx rgba(69, 69, 69, 0.13) inset;
				font-size: 20rpx;
				text-align: left;
				color: #666666;

				.item {
					padding-left: 100rpx;
				}

				text {
					color: #177fff;
				}
			}

			.coupons-sign-show {
				display: block;
			}

			.coupons-con {
				position: relative;
				width: 657rpx;
				height: 191rpx;
				background-image: url('https://sj.shopec.com.cn/image-server/glxcx/coupons-canuse.png');
				background-size: cover;
				color: #333333;

				.coupons-l {
					width: 197rpx;

					.money {
						position: relative;
						font-size: 67rpx;
						font-weight: bold;
						height: 67rpx;

						.money-i {
							margin-right: 10rpx;
							font-size: 21rpx;
						}
					}

					.money-conditions {
						font-size: 21rpx;
						margin-top: 10rpx;
					}
				}

				.coupons-r {
					text-align: left;
					padding: 41rpx 0;
					width: 200rpx;

					.tit {
						font-size: 21rpx;
						font-weight: bold;
						margin-bottom: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.time {
						font-size: 16rpx;
						font-weight: bold;
						color: #666;
						margin-bottom: 15rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.area {
						font-size: 20rpx;
						font-weight: bold;
						color: #666;
					}
				}

				.type {
					position: absolute;
					width: 150rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					height: 41rpx;
					opacity: 1;
					background: #177fff;
					border-radius: 0 0 28rpx 28rpx;
					top: 0rpx;
					right: 30rpx;
					font-size: 22rpx;
					font-weight: 700;
					color: #ffffff;
					padding: 0 5rpx;
				}
			}

			.coupons-con-used {
				background-image: url('https://sj.shopec.com.cn/image-server/glxcx/coupons-used.png');
			}

			.coupons-con-unuse {
				background-image: url('https://sj.shopec.com.cn/image-server/glxcx/coupons-unuse.png');
			}
		}

		.status-wrapper {
			padding-top: 20rpx;
			font-size: 24rpx;
			width: 657rpx;

			.active {
				color: #177fff;
			}
		}
	}

	.list {
		width: 100%;

		.item {
			width: 660rpx;
			height: 231rpx;
			background: #ffffff;
			border-radius: 18rpx;
			margin: 23rpx auto;
			padding: 30rpx;
			box-sizing: border-box;

			.color {
				width: 110rpx;
				height: 36rpx;
				opacity: 1;
				background: #177fff;
				border-radius: 6rpx;
				font-size: 24rpx;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				line-height: 36rpx;
				margin-right: 18rpx;

				&.color1 {
					background: #177fff;
				}

				&.color2 {
					background: #ff6738;
				}

				&.color3 {
					background: #f54170;
				}

				&.color4 {
					background: #2db2ad;
				}
			}
		}

		.item-title {
			font-size: 28rpx;
			font-weight: 700;
			color: #131313;
			margin: 20rpx 0;
		}

		.info {
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			line-height: 36rpx;
		}
	}
	
	/deep/ .empty-icon{
		display: inline-table;
	}
</style>
